<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
		<title>关于我们</title>
		<link rel="stylesheet" href="../../css/privacy.css">
		<link rel="stylesheet" href="../../css/about.css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	</head>
	<body>
		<!-- 头部区域 -->
		<header class="policy-header">
			<div class="container">
				<h1><i class="fas fa-users"></i> 关于我们</h1>
				<p>我们是一家致力于创新技术解决方案的公司，拥有专业的团队和丰富的行业经验</p>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<main class="policy-container">
			<div class="container">
				<!-- 公司介绍部分 -->
				<section class="policy-section">
					<h2>公司简介</h2>
					<p>成立于2010年，我们始终专注于为客户提供最优质的技术服务和解决方案。经过十多年的发展，我们已经成长为行业内的领先企业。</p>
					<p>我们的使命是通过技术创新帮助客户实现业务增长和数字化转型。我们相信技术的力量可以改变世界，让生活更美好。</p>
					<p>目前，我们在全球拥有超过500名员工，服务客户遍布20多个国家和地区。</p>
				</section>

				<!-- 我们的价值观 -->
				<section class="policy-section">
					<h2>我们的价值观</h2>
					<div class="team-container">
						<div class="team-member">
							<div class="member-info">
								<i class="fas fa-lightbulb"
									style="font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem;"></i>
								<h3>创新</h3>
								<p>我们不断追求技术创新，寻找更好的解决方案</p>
							</div>
						</div>
						<div class="team-member">
							<div class="member-info">
								<i class="fas fa-handshake"
									style="font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem;"></i>
								<h3>诚信</h3>
								<p>我们坚持诚信经营，与客户建立长期信任关系</p>
							</div>
						</div>
						<div class="team-member">
							<div class="member-info">
								<i class="fas fa-users"
									style="font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem;"></i>
								<h3>协作</h3>
								<p>我们重视团队合作，相信集体智慧的力量</p>
							</div>
						</div>
					</div>
				</section>

				<!-- 我们的团队 -->
				<section class="policy-section">
					<h2>我们的团队</h2>
					<p>我们拥有一支由行业专家和技术精英组成的多元化团队，致力于为客户提供最专业的服务。</p>

					<div class="team-container">
						<div class="team-member">
							<div class="member-image">
								<img src="https://picsum.photos/400/400?random=1" alt="张明 CEO">
							</div>
							<div class="member-info">
								<h3>张明</h3>
								<p class="position">创始人 & CEO</p>
								<p>拥有15年行业经验的技术专家，领导公司战略发展方向。</p>
								<div class="member-social">
									<a href="#"><i class="fab fa-linkedin"></i></a>
									<a href="#"><i class="fab fa-twitter"></i></a>
									<a href="#"><i class="fas fa-envelope"></i></a>
								</div>
							</div>
						</div>
						<div class="team-member">
							<div class="member-image">
								<img src="https://picsum.photos/400/400?random=2" alt="李华 CTO">
							</div>
							<div class="member-info">
								<h3>李华</h3>
								<p class="position">首席技术官</p>
								<p>技术架构专家，负责公司技术路线规划和产品研发。</p>
								<div class="member-social">
									<a href="#"><i class="fab fa-linkedin"></i></a>
									<a href="#"><i class="fab fa-github"></i></a>
									<a href="#"><i class="fas fa-envelope"></i></a>
								</div>
							</div>
						</div>
						<div class="team-member">
							<div class="member-image">
								<img src="https://picsum.photos/400/400?random=3" alt="王芳 产品总监">
							</div>
							<div class="member-info">
								<h3>王芳</h3>
								<p class="position">产品总监</p>
								<p>用户体验专家，负责产品设计和用户需求分析。</p>
								<div class="member-social">
									<a href="#"><i class="fab fa-linkedin"></i></a>
									<a href="#"><i class="fab fa-behance"></i></a>
									<a href="#"><i class="fas fa-envelope"></i></a>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- 发展历程 -->
				<section class="policy-section">
					<h2>发展历程</h2>
					<div class="timeline-container">
						<div class="timeline-item">
							<div class="timeline-dot"></div>
							<div class="timeline-content">
								<div class="timeline-date">
									<i class="far fa-calendar-alt"></i> 2025年1月
								</div>
								<h3 class="timeline-title">项目启动</h3>
								<p class="timeline-desc">正式启动移动端开发项目，组建核心团队，确定产品方向和初期规划。</p>
								<img src="https://picsum.photos/600/300?random=1" alt="项目启动会议照片" class="timeline-image">
							</div>
						</div>

						<div class="timeline-item">
							<div class="timeline-dot"></div>
							<div class="timeline-content">
								<div class="timeline-date">
									<i class="far fa-calendar-alt"></i> 2025年3月
								</div>
								<h3 class="timeline-title">UI设计完成</h3>
								<p class="timeline-desc">完成全部界面设计和交互原型，通过用户测试获得积极反馈。</p>
								<img src="https://picsum.photos/600/300?random=2" alt="UI设计展示" class="timeline-image">
							</div>
						</div>

						<div class="timeline-item">
							<div class="timeline-dot"></div>
							<div class="timeline-content">
								<div class="timeline-date">
									<i class="far fa-calendar-alt"></i> 2025年6月
								</div>
								<h3 class="timeline-title">核心功能开发</h3>
								<p class="timeline-desc">实现产品核心功能模块，包括用户认证、数据同步和个性化推荐系统。</p>
								<img src="https://picsum.photos/600/300?random=3" alt="开发团队工作照片" class="timeline-image">
							</div>
						</div>

						<div class="timeline-item">
							<div class="timeline-dot"></div>
							<div class="timeline-content">
								<div class="timeline-date">
									<i class="far fa-calendar-alt"></i> 2025年8月
								</div>
								<h3 class="timeline-title">Beta测试</h3>
								<p class="timeline-desc">向首批测试用户发布Beta版本，收集反馈并进行优化调整。</p>
								<img src="https://picsum.photos/600/300?random=4" alt="Beta测试界面截图"
									class="timeline-image">
							</div>
						</div>

						<div class="timeline-item">
							<div class="timeline-dot"></div>
							<div class="timeline-content">
								<div class="timeline-date">
									<i class="far fa-calendar-alt"></i> 2025年9月
								</div>
								<h3 class="timeline-title">正式发布</h3>
								<p class="timeline-desc">产品正式上线应用商店，获得媒体关注和用户好评。</p>
								<img src="https://picsum.photos/600/300?random=5" alt="产品发布会现场" class="timeline-image">
							</div>
						</div>
					</div>
				</section>
			</div>
		</main>

		<!-- 页脚区域 -->
		<footer class="policy-footer">
			<div class="container">
				<div class="footer-content">
					<div class="footer-column">
						<h3>联系方式</h3>
						<ul>
							<li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区科技园A座</li>
							<li><i class="fas fa-phone"></i> +86 10 12345678</li>
							<li><i class="fas fa-envelope"></i> info@company.com</li>
						</ul>
					</div>
				</div>
				<div class="footer-bottom">
					<p>&copy; 2025 公司名称. 保留所有权利.</p>
				</div>
			</div>
		</footer>
		<div class="back-to-top" id="backToTop">
			<i class="fas fa-arrow-up"></i>
		</div>
		<script>
			// 返回顶部按钮功能
			const backToTop = document.getElementById('backToTop');

			window.addEventListener('scroll', () => {
				if (window.pageYOffset > 300) {
					backToTop.classList.add('active');
				} else {
					backToTop.classList.remove('active');
				}
			});

			backToTop.addEventListener('click', () => {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			});

			// 滚动动画效果
			document.addEventListener('DOMContentLoaded', function() {
				const timelineItems = document.querySelectorAll('.timeline-item');

				const observer = new IntersectionObserver((entries) => {
					entries.forEach(entry => {
						if (entry.isIntersecting) {
							entry.target.style.opacity = 1;
						}
					});
				}, {
					threshold: 0.1
				});

				timelineItems.forEach(item => {
					observer.observe(item);
				});
			});
		</script>
	</body>
</html>
